<template>
  <!-- 每天最多发布3条 每条无线字数 -->
  <div class="warps">
    <div :class="['homewarp', iseditor ? 'ishide' : '']">
      <div class="homewarp_clender">
        <div class="clendertitle">
          <div class="ctime">
            <span @click="preMouth">
              <svg t="1673426981897" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10085"><path d="M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z" p-id="10086" data-spm-anchor-id="a313x.7781069.0.i12"></path></svg>
            </span>
            <span>{{`${years}/${mouths<10?('0'+mouths):mouths}`}}</span>
            <span @click="nextMouth">
              <svg t="1673427112137" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11000"><path d="M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z" p-id="11001" data-spm-anchor-id="a313x.7781069.0.i14"></path></svg>
            </span>
          </div>
          <div class="addbtns" v-if="nowdatas.length" @click="ondeleteditor">移除随记 📑</div>
          <div class="addbtns" v-else @click="onclickeditor">写随记 📝</div>
        </div>
        <div class="clenders" v-if="!loads">
          <div class="weekitem" v-for="(item, index) in weeks" :key="item">{{ item }}</div>
          <div :class="['clenders_item', item.ismouth ? 'ismouth' : '']"
            v-for="(item, index) in [...Object.values(lists)]" :key="item.key" @click="onSelectitem(item)">
            <div :class="[item.istoday ? 'istoday' : '', item.key == itemindex ? 'isSelect' : '']">{{ item.day }}</div>
            <div :class="['dot', item.lists.length ? 'dotactive' : '']"></div>
          </div>
        </div>
      </div>
      <div class="homewarp_lists">
        <div class="finshlists">
          <div v-if="!nowdatas.length" class="empty">
              暂无内容📂
          </div>
          <div v-if="nowdatas.length" class="finshlists_item" @click="onclickeditor">
             <div class="showlists" v-html="nowdatas[0]"></div> 
          </div> 
        </div>
      </div>
    </div>
    <div :class="['editors', iseditor ? 'isshow' : '']">
        <div class="editors_top" >
             <div @click="onclickeditor">
              <svg t="1673400831573" class="icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2676"><path d="M894.976 574.464q0 78.848-29.696 148.48t-81.408 123.392-121.856 88.064-151.04 41.472q-5.12 1.024-9.216 1.536t-9.216 0.512l-177.152 0q-17.408 0-34.304-6.144t-30.208-16.896-22.016-25.088-8.704-29.696 8.192-29.696 21.504-24.576 29.696-16.384 33.792-6.144l158.72 1.024q54.272 0 102.4-19.968t83.968-53.76 56.32-79.36 20.48-97.792q0-49.152-18.432-92.16t-50.688-76.8-75.264-54.784-93.184-26.112q-2.048 0-2.56 0.512t-2.56 0.512l-162.816 0 0 80.896q0 17.408-13.824 25.6t-44.544-10.24q-8.192-5.12-26.112-17.92t-41.984-30.208-50.688-36.864l-51.2-38.912q-15.36-12.288-26.624-22.016t-11.264-24.064q0-12.288 12.8-25.6t29.184-26.624q18.432-15.36 44.032-35.84t50.688-39.936 45.056-35.328 28.16-22.016q24.576-17.408 39.936-7.168t16.384 30.72l0 81.92 162.816 0q5.12 0 10.752 1.024t10.752 2.048q79.872 8.192 149.504 41.984t121.344 87.552 80.896 123.392 29.184 147.456z" p-id="2677" data-spm-anchor-id="a313x.7781069.0.i0"></path></svg>
             </div>
             <div @click="onSavefn" class="saves">
                 保存
             </div>
        </div>
        <div class="toolbars">
          <!-- 左对齐，居中，右对齐，标题，有序列表，加入，插入时间，颜色 -->
          <Toolbar></Toolbar>
        </div>
        <div class="editors_warp" >
             <div class="editwarp" @input="onchangetext" ref="warphtml" contenteditable="true" v-html="htmls" data-hodle="内容限制6-200字之间">
              
             </div>
        </div>
        <div :class="[iserror?'errors':'default']" >
            {{iserror?'你的字数已经超出限制!最后内容将无法被保存！':`${strlen}/100`}}
        </div>
    </div>
  </div>
</template> 
<script>

// const { remote, ipcRenderer, ipcMain } = require('electron');
import {  ipcRenderer  } from 'electron';
import toolbar from '@/components/toolbar.vue';
let maxlen = 100;
const t = new Date();
const y = t.getFullYear();
const m = t.getMonth() + 1;
const d = t.getDate();
export default {
  name: 'pages',
  components:{
    Toolbar:toolbar
  },
  inject:['name'],
  data() {
    return {
      loads: true,
      iserror:false,
      showdatas:{},
      lists: {},
      htmls:``,
      shodatas: [],
      itemindex: `${y}-${m}-${d}`,
      strlen:0,
      iseditor: false,
      years:y,
      mouths:m,
      nowdatas:'',
      weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  }, 
  computed:{
     namedata(){
       return this.name;
     }
  },
  mounted() {
    // 渲染日历与渲染数据分为两个分支处理
    // createdom阶段说明数据库使用被初始化，可以直接读取
    let ipcrend =  window.ipcRenderer?window.ipcRenderer:ipcRenderer
    // 首页白屏优化
    // 1. 初始化日历
    this.initclender(this.years, this.mouths); 
    // 2. 获取子进程初始数据
    let d_list =this.namedata();
    // 3. 转json
    this.showdatas = typeof d_list == 'object'?d_list:JSON.parse(d_list)
    // 4. 视图展示
    this.genlists(d_list);
    let _this = this;
    window.ipcRenderer.on('getdatas',(e,data)=>{ 
        _this.genlists(data);   
        _this.showdatas = data; 
     })  
    //   创建和更新都是统一个接口
    window.ipcRenderer.on('createresult',(e,data)=>{ 
     
      if(data){
        _this.addnote(data);
        _this.iseditor=!_this.iseditor;
        _this.htmls='请填写你的计划'
      }else{
        alert('添加失败！请重启！0.0')
      }
     })  
    //  移除
    window.ipcRenderer.on('deleteresult',(e,data)=>{ 
      _this.ondeletlists(data);
     })  
    //  废弃api
    // this.getdatas()
  }, 
  methods: { 
    ondeletlists(e){
        this.lists[e].lists=[];
        this.nowdatas = [];
    },
    ondeleteditor(){
      window.ipcRenderer.send('delete', this.itemindex); 
    },
    addnote(e){
      this.genlists(e);
    },
    getdatas(){
      window.ipcRenderer.send('inits', 'db'); 
    },
    preMouth(){ 
    
        this.mouths--;
        if(this.mouths<=0){
          this.mouths = 12;
          this.years--; 
        }
        this.lists={};
        this.initclender(this.years, this.mouths); 
        this.getdatas()
        // this.addnote(this.showdatas)
    },
    nextMouth(){
     
        this.mouths++;
        if(this.mouths>12){
          this.mouths = 1;
          this.years++; 
        }
        this.lists={};
        this.initclender(this.years, this.mouths);
        this.getdatas()
        // this.addnote(this.showdatas)
    },
    onchangetext(e){
     let str = e.target.innerText.replace(/\n/g,'').replace(/\s/g,'');
     this.iserror = str.length>maxlen;
     this.strlen = str.length;
    },
    onSavefn(){
         let html = this.$refs['warphtml'].innerHTML;
         let str = html.replace(/\<(\/)?.\>/g,'').replace(/\n/g,'').replace(/\s/g,'');
         //需要储存的数据  
         //需要储存的数据  
         if(str.length>0){
          if(window.ipcRenderer){
           
            window.ipcRenderer.send('create', JSON.stringify({time:this.itemindex ,data:html}));    
          }else{
          
            ipcRenderer.send('create', JSON.stringify({time:this.itemindex ,data:html}));    
          } 
         }else{
          alert('保存内容不能为空')
         } 
    },
    initclender(year, mouth) {
      let times = new Date(year, mouth, 0);
      let tf_day = times.getDate();
      // let tw_day = new Date(`${year}${mouth}1`).getDay();
      // let lf_day = new Date(year,mouth+1,0).getDay();
      let pf_day = new Date(mouth - 1 == 0 ? year - 1 : year, mouth - 1 == 0 ? 12 : mouth - 1, 0).getDay();
      let pre_day = new Date(mouth - 1 == 0 ? year - 1 : year, mouth - 1 == 0 ? 12 : mouth - 1, 0).getDate();
      pf_day = pf_day == 0 ? 7 : pf_day;
      pre_day = pre_day - pf_day;
      // 前几位永远是最大的
      for (let pre = 0; pre < (7 - (7 - pf_day)); pre++) {
        let ds = `${year - 1}-${mouth - 1}-${pre_day++}`;
        this.lists[ds] = {
          day: pre_day,
          ismouth: false,
          lists: [],
          key: ds
        };
      }
      for (let tod = 0; tod < tf_day; tod++) {
        let today = tod + 1;
        let ds = `${year}-${mouth}-${today}`;
        this.lists[ds] = {
          day: today,
          istoday: (today == d && year == y && mouth == m),
          ismouth: true,
          lists: [],
          key: ds
        };
      }
      // 日历为42位制；, 后几位永远是最小的
      let len = 42 - Object.keys(this.lists).length;
      for (let tod = 0; tod < len; tod++) {
        let ds = `${year + 1}-${mouth + 1}-${tod + 1}`;
        this.lists[ds] = {
          day: tod + 1,
          ismouth: false,
          lists: [],
          key: ds
        };
      }
      this.loads = false;
    }, 
    onSelectitem(item){
      if (item.ismouth){
        this.nowdatas = this.lists[item.key].lists; 
        this.itemindex = item.key;
      } 
    },
    onclickeditor() {
      this.htmls = this.nowdatas[0]
      this.iseditor = !this.iseditor
    },
    genlists(data) {
     
      let listsd = typeof data === 'string'?JSON.parse(data):data;
    
      Object.keys(listsd).forEach(key => { 
        if(this.lists[key] && this.lists[key].ismouth){
            if(!this.lists[key]?.lists){
            this.lists[key]  = {
              ...this.lists[key], 
              lists:[listsd[key]]
            }
          }else{
            this.lists[key].lists = [listsd[key]];
          } 
        }  
      }); 
     
      this.nowdatas = this.lists[this.itemindex]?.lists ?? [];
    
    }
  }
}
</script>
<style lang="less">
@colors: #475569;
@colors2: #64748B;
// @sysfont: century gothic, texgyreadventor, stheiti, sans-serif;
@sysfont:'myFontName';
.editwarp:empty::before{
   content: attr(data-hodle);
   font-size: .7rem;
   color: #64748B;
   font-family: @sysfont;
   div{
    font-family: @sysfont;
   }
}
.empty{
    text-align: center;
    font-size: .7rem;
    color: #475569;
    font-family: @sysfont;
}
.errors{
   font-size: .8rem;
   color: #f43f5e; 
}
.default{
  font-size: .8rem;
   color: @colors2; 
}
.icon{
   color: @colors;
   width: 1rem;
   height: 1rem;
}
.saves{
  //  background-color: #fff;
  //  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
   font-weight: bold;
   font-family: @sysfont;
   padding: 3px 6px;
  //  border-radius: 3px;
   color: #475569;
  
   -webkit-app-region: no-drag;
   cursor: pointer;
   transition: all .1s ease-in 0s;
    &:active{
        transform: scale(.8);
      }
    &:hover{
      transform: scale(.9);
    }
}
.toolbars{
   display: flex;
 
}
.warps {
  width:100%;
  position: relative; 

  .editors {
    position: absolute;
    z-index: 99;
    left:100%;
    top: 0;
    width: 100%;
    height: 90%;
    background-color: #fff; 
    opacity: 0;
    transition: all .2s ease-in-out 0s;
    -webkit-app-region: no-drag;
    padding: 10px 20px; 
  box-sizing: border-box;
  font-family: @sysfont;
    &_warp{
      -webkit-app-region: no-drag;  
      font-size: .9rem;
      width: 100%;
      margin-top: 10px;
      box-sizing: border-box;
     &>div{
         width: 100%;
         height: 250px;
         overflow: hidden;
         outline-style: none;
     }
    }
    &_top{
       margin-bottom: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: .8rem; 
       &>div:nth-of-type(1){
        -webkit-app-region: no-drag;
        cursor: pointer;
       }
    }
    &.isshow { 
      opacity: 1;  
      left: 0;
    }
  }
}

 
.clendertitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .7rem;
  font-weight: 100;
  //  color: red;
  font-family: @sysfont;
  padding: 10px;

  .ctime {
    display: flex;
    align-items: center;

    &>span:nth-of-type(1) {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      cursor: pointer;
      -webkit-app-region: no-drag;
      transition: all .1s ease-in 0s;
    &:active{
        transform: scale(.8);
      }
    &:hover{
      transform: scale(.9);
    }
    }

    &>span:nth-of-type(2) {
      margin: 0 1rem;
      font-weight: bold;
      font-size: 1rem;
    
    }

    &>span:nth-of-type(3) {
      -webkit-app-region: no-drag;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all .1s ease-in 0s;
    &:active{
        transform: scale(.8);
      }
    &:hover{
      transform: scale(.9);
    }
    }
  }


}
.addbtns {
    border-radius: 3px;
    padding: 3px 7px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-app-region: no-drag;
    cursor: pointer;
    transform: scale(1);
    transition: all .1s ease-in 0s;
    border: 2px solid rgb(254, 254, 254);
    box-sizing: border-box;
    &:active{
        transform: scale(.8);
      }
    &:hover{
      transform: scale(.9);
    }
  }
.hoverwarpleft {
  display: flex;

  .bars {
    //  flex: 1;
    width: 200px;
    margin-right: .5rem;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;
  }

  &>div:nth-of-type(2) {
    flex: 1;
  }
}

/* CSS */
.homewarp {

  // display: flex;
  // height: 100 
  transition: all .3s ease-in 0s;
  &.ishide {
    transform: scale(.9) translateX(100px);
  }
} 
.homewarp_lists {
  display: flex;
  flex: 1;
  margin-top: .5rem; 
  .finshlists {
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;

    &_item {
      display: flex;
      // align-items: center;
      font-size: .7rem;
      font-weight: 100;
      margin: 3px 0;
      //  color: red;
      background: #f2f4f8;
      height: 70px;
      overflow: hidden;
      border-radius: 3px;
      cursor: pointer;
      padding: 5px;
      font-family: @sysfont;
      -webkit-app-region: no-drag;
      transform: scale(1);
      transition: all .1s ease-in 0s;
      position: relative;
      &::before{
         content: '点击查看/编辑📖';
         display: flex;
          line-height: 150px;
         justify-content: center;
         color: #64748B;
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
         background: linear-gradient(to bottom,transparent,#fff);
         z-index: 99;
      }
      &:hover{
          transform: scale(.9);
      }
      &:active{
        transform: scale(.8);
      }
      &>div {
        margin-right: .5rem;
        
      }

      // &>div:nth-of-type(1) {
      //   width: 15px;
      //   height: 15px;
      //   border-radius: 50%;
      //   border: 1px solid #a5c7f7;

      // }
    }

    .ltitle {
      font-size: .7rem;
      font-weight: 100;
      //  color: red;
      font-family: @sysfont;
    }
  }

  &>div {
    flex: 1;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
    height: 150px;

    &:nth-of-type(2) {
      margin-left: .5rem;

    }
  }
}

.homewarp {

  padding: 10px;
  box-sizing: border-box;

  &_clender {
    background-color: #fff;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 10px;
  }
}

.weekitem {
  color: #64748B;
  font-weight: bold;
  text-align: center;
  font-size: .7rem;
  font-family: @sysfont;
  margin-bottom: 1rem;
  opacity: 1;
}

.clenders {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  .ismouth {
    color: @colors;
    opacity: 1;
  }

  .istoday {
    color: #fff;
    background: #64748B;

  }

  .isSelect {
    border: 1px solid #a5c7f7 !important;
  }

  .dot {
    width: 5px;
    height: 5px;
    // background-color: #475569;
    border-radius: 50%;
    margin-top: 5px;
  }

  .dotactive {
    background-color: #475569;
  }

  &_item {
    text-align: center;
    color: @colors2;
    font-family: @sysfont;
    font-size: .6rem;
    margin: 3px 0;
    opacity: .3;
    -webkit-app-region: no-drag;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .1s ease-in 0s;
    &:active{
        transform: scale(.8);
      }
    &:hover{
      transform: scale(.9);
    }
    &>div:nth-of-type(1) {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid transparent;
      transition: all .2s ease 0s;
    }

  }
}
</style>
